<template>
  <div>
    <el-badge :hidden="number == 0" :value="number" :max="99" class="item">
      <el-button size="small" @click="openDialog">增值服务订单提醒</el-button>
    </el-badge>
    <listDialog ref="listDialog" :countObject="countObject" @close="handleDialogClose"></listDialog>
  </div>
  
</template>

<script>
import listDialog from './listDialog'
import {
  addedUpWindowCount,
} from "@/api/system/addedServices";
export default {
  components: {
    listDialog
  },
  data() {
    return {
      number: 0,
      countObject: {}
    };
  },
  methods: {
    openDialog() {
      this.$refs.listDialog.show()
    },
    // 获取增值服务待处理数量
    getAddedUpWindowCount() {
      this.number = 0
      return addedUpWindowCount().then(res => {
        const resData = res.data.data
        this.countObject = resData || {}
        if (resData) {
          Object.keys(resData).forEach(key => {
            this.number = this.number + resData[key]
          })
        }
      })
    },
    updateNumberAndShowDialog() {
      this.getAddedUpWindowCount().then(() => {
        if (this.number > 0) {
          this.openDialog()
        }
      })
    },
    setTimer() {
      this.timer = setInterval(() => {
        if (!this.$refs.listDialog || !this.$refs.listDialog.visible) {
          this.updateNumberAndShowDialog()
        }
      }, 60 * 1000)
    },
    clearTimer() {
      if (this.timer !== null) {
        window.clearInterval(this.timer)
        this.timer = null
      }
    },
    handleDialogClose() {
      this.getAddedUpWindowCount()
    }
  },
  activated() {
    this.updateNumberAndShowDialog()
    this.setTimer()
  },
  deactivated() {
    this.clearTimer()
  }
};
</script>
<style lang="scss" scoped>

</style>